<template>
    <el-container :direction="vertical">
        <el-header height="500px" style="background-color: white;background-image: url('/imgs/login/首页搜索.jpg');
            background-size: cover;;background-repeat: no-repeat;background-position: center;position: relative;">
            <div style="height: 200px;">
                <p style="color: white;font-size: 40px;font-weight:bolder;text-align:center;padding-top: 20px;
                font-family: FangSong">-品质生活-&nbsp;&nbsp;-自然孕育-&nbsp;&nbsp;-人工种植-&nbsp;&nbsp;-田园特色-</p>
                <p style="color: white;font-size: 40px;font-weight:bolder;text-align:center;padding-top: 20px;
                font-family: FangSong">Welcome to Hemu Life</p>
            </div>
            <div style="width: 100%;position: relative;">
                <el-input v-model="input.name" style="width: 60vh;height: 45px;border-radius: 22.5px;overflow: hidden;
                position: absolute;left: 32%;top: 100px;"  placeholder="请输入您要搜索的商品" />
                <el-button type="primary" style="width: 45px;height: 45px;border-radius: 22.5px;overflow: hidden;
                position: absolute;left: 65%;top: 100px;" @click="searchGoods(input.name)">
                    <el-icon>
                    <Search />
                    </el-icon>
                </el-button>
            </div>
            <p style="position: absolute;bottom: 70px;left: 34%;color: aliceblue;">热门搜索:&nbsp;&nbsp;&nbsp;&nbsp;
                <el-link type="default" style="color: aliceblue;" @click.prevent="searchGoods('豌豆')">豌豆</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                <el-link type="default" style="color: aliceblue;" @click.prevent="searchGoods('油菜')">油菜</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                <el-link type="default" style="color: aliceblue;" @click.prevent="searchGoods('卷心菜')">卷心菜</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                <el-link type="default" style="color: aliceblue;" @click.prevent="searchGoods('芒果')">芒果</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
            </p>
        </el-header>
        <br>
        <el-container :direction="horizontal" >
            <el-aside width="150px">

            </el-aside>
            <el-container :direction="vertical">
                <el-main height="">
                    <el-row :gutter="20" style="margin-top: 30px;">
                        <el-col :span="6" :offset="0" v-for="(item,index) in productList" :key="index">
                            <el-card style="height: 450px;margin-bottom: 15px;">
                                <el-image :src="BASE_URL+item.imageUrl" :fit="fill" style="width: 100%;height: 280px;"  alt="" />
                                <p></p>
                                <p style="font-size: 25px;font-weight: bold;color: red;margin: 0 auto;">￥{{ item.price }}</p>
                                <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                                    <a href="#" @click="saveOneProduct(item)" style="">{{ item.description }}</a>
                                </p>
                                <div class="bottom clearfix">

                                    <div class="car" style="margin:0  0 15px 35px;">
                                        <el-button style="border: 1px solid slategray;" text plain @click="saveOneProduct(item)">
                                            商品详情
                                        </el-button>
                                        <el-button style="border: 1px solid slategray;" text plain @click="addCart(item.id)">加入购物车</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-main>
                <el-footer height="150px">
                    <!-- Footer content -->
                </el-footer>
            </el-container>
            <el-aside width="150px">

            </el-aside>
        </el-container>
    </el-container>
    

</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'
import qs from 'qs'


//定义查询商品的搜索框
const input = ref({
    name:''
})
//定义搜索商品的方法
const searchGoods = (item)=>{
      let goodName = input.value.name;
      if (item) {
          goodName = item
      }
        axios.get(BASE_URL+'/v1/product/list?name='+goodName).then(res=>{
            if (res.data.code === 2000) {
                productList.value = res.data.data
            } else {
                ElMessage.error(res.data.msg);
            }
        })
    
}
//定义加入购物车的单个商品
const cart = ref({

})


onMounted(() => {
    getProductList()
})

//定义数组保存商品列表数
const productList = ref([])
//获取商品列表数据
const getProductList = () => {
    axios.get(BASE_URL+'/v1/product/list?id=0').then(res=>{
        if (res.data.code === 2000) {
            productList.value = res.data.data
            console.log(productList.value)
        } else {
            ElMessage.error(res.data.msg);
        }
    })
}


//保存单个商品
const saveOneProduct = (item) => {
    router.push('/oneProduct')
    localStorage.setItem('product',JSON.stringify(item))
}
//获取用户信息
const user =JSON.parse(localStorage.getItem('user')) 
//添加购物车
const addCart = (item) => {    
    cart.value.userId = user.id
    cart.value.productsId = item
    cart.value.amount = 1
    console.log(cart.value)
    let data = qs.stringify(cart.value)
    axios.post(BASE_URL+'/v1/cart/add',data).then(res=>{
        if (res.data.code === 2000) {
            ElMessage.success('添加成功');
        } else {
            ElMessage.error(res.data.msg);
        }
    })
}
</script>


<style scoped>
a{
    color: black;
    text-decoration: none;
}
a:hover{
    color: red;
}
</style>